﻿var DAYS = ["Ngày","1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"];
///////////////////////////////////////////////////////////////
var randomColorFactor = function () {
    return Math.round(Math.random() * 255);
};
var randomColor = function () {
    return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
};
function send_data(data_js) {
    var day = [];
    var split = data_js.split(',');
    for (var i = 0; i < 31; i++) {
        day[i] = split[i];
    }
    var barChartData = {
        labels: DAYS,
        datasets: [{
            label: 'Ca/Ngày',
            data: [3,parseInt(day[0]), parseInt(day[1]), parseInt(day[2]), parseInt(day[3]), parseInt(day[4]), parseInt(day[5]), parseInt(day[6]), parseInt(day[7]), parseInt(day[8]), parseInt(day[9]), parseInt(day[10]), parseInt(day[11]), parseInt(day[12]), parseInt(day[13]), parseInt(day[14]), parseInt(day[15]), parseInt(day[16]), parseInt(day[17]), parseInt(day[18]), parseInt(day[19]), parseInt(day[20]), parseInt(day[21]), parseInt(day[22]), parseInt(day[23]), parseInt(day[24]), parseInt(day[25]), parseInt(day[26]), parseInt(day[27]), parseInt(day[28]), parseInt(day[29]), parseInt(day[30])],
            //data:[0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3,0,1,2,3,0,1,2],
            backgroundColor: randomColor(),
            borderWidth: 1,
            borderColor: 'black'
        }]
    };
    return barChartData;
}
function get_working_time(staff, month, year) {
    document.getElementById('working_Time_Area').innerHTML = '<div id="loading"><div id="loading-center-absolute"><div class="object w3-text-teal" id="object_four"></div><div class="object w3-text-teal" id="object_three"></div><div class="object w3-text-teal" id="object_two"></div><div class="object w3-text-teal" id="object_one"></div></div></div>';
    var xhttp;
    xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById('working_Time_Area').innerHTML = xhttp.responseText;
            $(document).ready(function () {
                $('[data-toggle="tooltip"]').tooltip();
            });
            $("#working_Time_Area").css("opacity","0.2");
            var xhttp1;
            xhttp1 = new XMLHttpRequest();
            xhttp1.onreadystatechange = function () {
                if (xhttp1.readyState == 4 && xhttp1.status == 200) {
                    document.getElementById('working_data_area').innerHTML = xhttp1.responseText;
                    $("#working_Time_Area").css("opacity", "1");
                    
                    var canvas_lenght = document.getElementsByClassName("canvas").length;
                    
                    var ctx = [];
                    var data_js = "";

                    for (var i = 0; i < canvas_lenght; i++) {
                        var staff_id = document.getElementsByClassName("chart_staff_id")[i].innerHTML;
                        var name = document.getElementsByClassName("chart_staff_name")[i].innerHTML;
                        ctx[i] = document.getElementsByClassName("canvas")[i].getContext("2d");
                        var data = document.getElementById("working_data_area").getElementsByClassName("data")[i].innerHTML.trim();
                        window.myBar = new Chart(ctx[i], {
                            type: 'bar',
                            data: send_data(data),
                            options: {
                                elements: {
                                    rectangle: {
                                        borderWidth: 1,
                                        borderColor: 'black',
                                        borderSkipped: 'bottom'
                                    }
                                },
                                responsive: true,
                                legend: {
                                    position: 'bottom',
                                },
                                title: {
                                    display: true,
                                    text: name
                                }
                            }
                        });
                    }
                }
            };
            xhttp1.open("GET", "../ajax/asp/accountant/get_data_chart.aspx?id="+staff +"&month="+month+"&year="+year, true);
            xhttp1.send();
        };
    };
    xhttp.open("GET", "../ajax/asp/accountant/load_Chart.aspx?id="+staff+"&month="+month+"&year="+year, true);
    xhttp.send();
}
var staff = document.getElementById("ddl_staff").value;
var month = document.getElementById("ddl_select_month").value;
var year = document.getElementById("ddl_select_year").value;
$("#btn_search").on("click", function () {
    var id = document.getElementById("ddl_staff").value;
    var month = document.getElementById("ddl_select_month").value;
    var year = document.getElementById("ddl_select_year").value;
    get_working_time(id,month,year);
})
window.onload = get_working_time(staff,month,year);
